<template>
  <div>
    <h1>个人基本信息</h1>
    <HR1/>
    <el-container id="col1">
    <el-aside width="200px" left="30px">
      <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg">
    </el-aside>
    <el-main id="col2">
      <h2>姓名</h2>
      <p1 contenteditable = "true">派大星</p1>
      <HR2/>
      <h3>性别</h3>
      <p2 contenteditable = "true">女</p2>
      <HR3/>
      <h4>出生年月</h4>
      <p3 contenteditable = "true">1999/1</p3>
      <HR4/>
      <h5>所在城市</h5>
      <p4 contenteditable = "true">广州</p4>
      <HR5/>
      <h6>毕业院校</h6>
      <p5 contenteditable = "true">中山大学</p5>
      <HR6/>
      <h7>最高学历</h7>
      <p6 contenteditable = "true">本科</p6>
      <HR7/>
      <h8>专业</h8>
      <p7 contenteditable = "true">信息管理与信息系统</p7>
      <HR8/>
    </el-main>
    </el-container>
      </div>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
  position: absolute;
  left: 50px;
  top: 12px;
  width: 200px;
  height: 50px;
  color: rgba(16, 16, 16, 1);
  font-size: 25px;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}
HR1 {
  position: absolute;
  left: 0px;
  top: 70px;
  width: 100%;
  height: NaNpx;
  border: 1px solid rgba(232, 232, 232, 1);
}
img {
  position: absolute;
  left: 50px;
  top: 100px;
  width: 190px;
  height: 259px;
  border: 1px solid rgba(187, 187, 187, 1);
}
button1 {
  position: absolute;
  left: 70px;
  top: 390px;
  width: 75px;
  height: 20px;
  background-color: #555555;
  border: none;
  border-radius: 12px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
p0 {
  position: absolute;
  left: 40px;
  top: 450px;
  font-size: 13px;
  color: gray;
}

h2 {
  position: absolute;
  left: 400px;
  top: 90px;
  width: 73px;
  height: 38px;
  color: rgba(96, 96, 96, 1);
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}
p1 {
  position: absolute;
  left: 530px;
  top: 105px;
  width: 100px;
  height: 30px;
  color: rgba(25, 144, 255, 1);
  font-size: 20px;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}
HR2 {
  position: absolute;
  left: 350px;
  top: 150px;
  width: 400px;
  height: NaNpx;
  border: 1px solid rgba(232, 232, 232, 1);
}
h3 {
  position: absolute;
  left: 400px;
  top: 165px;
  width: 73px;
  height: 38px;
  color: rgba(96, 96, 96, 1);
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}
p2 {
  position: absolute;
  left: 530px;
  top: 184px;
  width: 530px;
  height: 30px;
  color: rgba(25, 144, 255, 1);
  font-size: 20px;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}
HR3 {
  position: absolute;
  left: 350px;
  top: 230px;
  width: 400px;
  height: NaNpx;
  border: 1px solid rgba(232, 232, 232, 1);
}
h4{
  position: absolute;
  left: 400px;
  top: 238px;
  width: 90px;
  height: 38px;
  color: rgba(96, 96, 96, 1);
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}
p3 {
  position: absolute;
  left: 530px;
  top: 267px;
  width: 250px;
  height: 30px;
  color: rgba(25, 144, 255, 1);
  font-size: 20px;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}
HR4 {
  position: absolute;
  left: 350px;
  top: 310px;
  width: 400px;
  height: NaNpx;
  border: 1px solid rgba(232, 232, 232, 1);
}
h5 {
  position: absolute;
  left: 400px;
  top: 312px;
  width: 90px;
  height: 38px;
  color: rgba(96, 96, 96, 1);
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}
p4 {
  position: absolute;
  left: 530px;
  top: 346px;
  width: 250px;
  height: 30px;
  color: rgba(25, 144, 255, 1);
  font-size: 20px;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}
HR5 {
  position: absolute;
  left: 350px;
  top: 390px;
  width: 400px;
  height: NaNpx;
  border: 1px solid rgba(232, 232, 232, 1);
}
h6 {
  position: absolute;
  left: 400px;
  top: 379px;
  width: 90px;
  height: 38px;
  color: rgba(96, 96, 96, 1);
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}
p5 {
  position: absolute;
  left: 530px;
  top: 429px;
  width: 250px;
  height: 30px;
  color: rgba(25, 144, 255, 1);
  font-size: 20px;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}
HR6 {
  position: absolute;
  left: 350px;
  top: 470px;
  width: 400px;
  height: NaNpx;
  border: 1px solid rgba(232, 232, 232, 1);
}
h7 {
  position: absolute;
  left: 400px;
  top: 504px;
  width: 90px;
  height: 38px;
  color: rgba(96, 96, 96, 1);
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}
p6 {
  position: absolute;
  left: 530px;
  top: 504px;
  width: 250px;
  height: 30px;
  color: rgba(25, 144, 255, 1);
  font-size: 20px;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}
HR7 {
  position: absolute;
  left: 350px;
  top: 550px;
  width: 400px;
  height: NaNpx;
  border: 1px solid rgba(232, 232, 232, 1);
}
h8 {
  position: absolute;
  left: 400px;
  top: 584px;
  width: 90px;
  height: 38px;
  color: rgba(96, 96, 96, 1);
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}
p7 {
  position: absolute;
  left: 530px;
  top: 584px;
  width: 250px;
  height: 30px;
  color: rgba(25, 144, 255, 1);
  font-size: 20px;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}
HR8 {
  position: absolute;
  left: 350px;
  top: 630px;
  width: 400px;
  height: NaNpx;
  border: 1px solid rgba(232, 232, 232, 1);
}
</style>
